<template>
<div class="orderBar">
  <div class="meInfo">
    <div class="block1">
      <el-avatar :size="100"  :src="getuserInfo.photoUrl"></el-avatar>
    </div>
    <div class="meInfo-userName">
      <span>Hi！</span>
      <span>{{ getuserInfo.userName }}</span>
    </div>
    <div class="meInfo-user-label">
      <ul>
        <li>
          <div class="jb"></div>
          <a href="" class="jb-text">求助达人</a>
        </li>
        <li>
          <div class="jb2"></div>
          <a href="" class="jb-text">热心群众</a>
        </li>
      </ul>
    </div>
    <div class="dataList">
      <ul>
        <li>
          <div class="orderInfo">
            <h2>{{orderMumCount.initiateOrderNum}}</h2>
            <a href="" class="jb-text">求助</a>
          </div>
        </li>
        <li>
          <div class="orderInfo">
            <h2>{{orderMumCount.helpOrderNum}}</h2>
            <a href="" class="jb-text">帮助</a>
          </div>
        </li>
        <li>
          <div class="orderInfo">
            <h2>{{orderMumCount.confirmOrderNum}}</h2>
            <a href="" class="jb-text">待确认</a>
          </div>
        </li>
        <li>
          <div class="orderInfo">
            <h2>{{orderMumCount.alreadyOrderNum+orderMumCount.alreadyHelpOrderNum}}</h2>
            <a href="" class="jb-text">已完成</a>
          </div>
        </li>
      </ul>
    </div>
    <div class="orderHistory" v-if="UserSnapshotOne">
      <div class="title" v-if="UserSnapshotOne.status===1">您有订单待确认</div>
      <div class="title" v-if="UserSnapshotOne.status===0">最新发布订单</div>
      <div class="title" v-if="UserSnapshotOne.status===2 && UserSnapshotOne.groupUserCode===getuserInfo.id">您有求助订单正在进行中</div>
      <div class="title" v-if="UserSnapshotOne.status===2 && UserSnapshotOne.helpUserCode===getuserInfo.id">您有帮助订单正在进行中</div>
      <div class="title" v-if="UserSnapshotOne.status===5">最新完成订单</div>
      <div  style="cursor: pointer" class="handColor" @click="goOrderDetail(UserSnapshotOne.id,UserSnapshotOne.orderInitiateCode)">
      <el-image
          lazy
          style="width: 100px; height: 100px; border-radius: 10px"
          :src="UserSnapshotOne.photoUrl || 'http://pic.imeitou.com/uploads/allimg/230217/7-23021G64414.jpg'"
          fit="fill">
      </el-image>
      <div class="orderHistoryInfo">
        <h2>订单：{{UserSnapshotOne.title}}</h2>
        <h2>订单状态：{{UserSnapshotOne.status}}</h2>
      </div>
      </div>
      <div  class="startTime">开始时间：<span style="color: deepskyblue">{{UserSnapshotOne.startTime}}</span></div>
    </div>
    <div class="orderHistory" v-if="!UserSnapshotOne">
      <h1>你还未有订单消息</h1>
    </div>
  </div>
</div>
</template>

<script>
import {mapState} from "vuex";

export default {
  name: "OrderBar",
  computed:{
    ...mapState({
      getuserInfo: state => state.user.userInfo,
      UserSnapshotOne:state => state.home.UserSnapshotOne,
      orderMumCount: state => state.home.OrderMumCount
    })
  },
  mounted() {
    this.$store.dispatch('UserSnapshotOne')
  },
  methods: {
    goOrderDetail(id,orderInitiateCode) {
      this.$router.push({name:'receive',query:{snapshotId: id,orderInitiateCode: orderInitiateCode}})
    },
  }
}
</script>

<style scoped>
.orderBar{
  margin-top: 10px;
  border-radius: 20px;
  float: right;
  width: 296px;
  height: 458px;
  background-color: #FFCCCC;
}
.meInfo {
  width: 100%;
  height: 55%;
  border-radius: 11px;
  background-color: #FFCCCC;
}
.meInfo .block1{
  float: left;
  margin-top: 20px;
  margin-left: 5%;
}
.meInfo-userName{
  width: 52%;
  margin-right: 6%;
  margin-top: 24px;
  float: right;
}
.meInfo-userName span{
  width: 100%;
  float: left;
  font-size: 30px;
}


.meInfo-user-label{
  clear: left;
  width: 100%;
  height: 26px;
  padding-top: 16px;
  margin:0 0 0 auto;
}
.meInfo-user-label>ul>li{
  font-size: 17px;
  float: left;
  background-color: #ffe4db;
  margin-left: 45px;
  border-radius: 9px;
}
.meInfo-user-label .jb{
  float: left;
  width: 16px;height: 16px;
  margin-top: 2px;
  background: url("./images/mb.png")no-repeat;
  background-position: 0px -573px;
}
.meInfo-user-label .jb2{
  float: left;
  width: 16px;height: 16px;
  margin-top: 2px;
  background: url("./images/mb.png")no-repeat;
  background-position: 0px -529px;
}
.meInfo-user>ul>li a{
  float: left;
  padding-left:3px;
  padding-right:5px;
  color: #ff6904;
  text-decoration: none;
}

.dataList{
  margin-top: 20px;
  width: 100%;
  height: 60px;
}
.dataList ul li{
  font-size:16px;
  float: left;
  width: 17%;
  height: 70%;
  margin-left: 20px;
  text-align:center;
}
.dataList ul li:hover{
  cursor: pointer;
  font-size:21px;
}

.orderHistory{
  width: 100%;
  height: 200px;
  margin-top: 15px;
  margin-left: 0px;
  background-color: lightpink;
  border-radius: 18px;
}
.orderHistory .handColor{
  width: 100%;
  height: 100px;
  border-radius: 18px;
  margin-top: 10px;
}
.orderHistory .handColor:hover{
  background-color: mistyrose;
}
.orderHistory .el-image{
  float: left;
  border-radius: 18px;
  margin-left: 10px;
}
.orderHistoryInfo{
  float: right;
  height: 100px;
  width: 60%;
}

.orderHistoryInfo h2{
  margin-top: 15px;
}
.orderHistoryInfo p{
  width: 150px;
  margin-top: 24px;
  font-size: 14px;
}
.startTime{
  clear: left;
  width: 100%;
  margin-left: 10px;
  padding-top: 15px;
  font-size:18px
}
.title{
  padding-top: 10px;
  margin-left: 10px;
  font-size: 21px;
}
</style>
